Website Setup
Structure and design of a good web site. Includes colors, fonts, interface. Also: basic SEO 'advice. ''"Your online presence says a lot about your personal brand. It allows you to build credibility as a professional and create a voice for yourself within your industry." ''- Heather R. Huhman on Personal Branding Blog, Jan 20, 2015.'' Resources Design * Color Scheme: Adobe CC to design one / Dribbble for implementation examples * Introduction and advice for color psychology * Annarita Tranfici's guide to responsive web design (Jan-Mar, 2013) * Highly popular design trend (spring 2014): Parallax themes Inspiring Websites * Parallax pages: dustn | redline | FSBOicity | Les Productions Wild Box * More inspiring web pages: Numix | Couchsurfing | Mark Manson | Gary Vaynerchuk | Policymic * Using photography to great effect: Kimberly and the Dreamtime | Radeberger | DB Karriere * Great use of overlay image: Paquin Entertainment * Additional Brilliant Homepage Examples Wordpress Plugins * Highly featured CSS3 image/content slider (18 Dollars, looks amazing) * Easy Media Gallery Pro - beautiful & fast for galleries, more (recommended by Social Media Examiner) * '''Free: parallax slider | another one | responsive image slider | Cyclone Slider 2 * Slide-out sidebar: free | paid * Collapsible content: Collapse-O-Matic (free) | Expand + Collapse Funk * Google Fonts plugin: allows to use any font featured by Google on your page! * Create your own, personalized short URLs: Pretty Link plugin * Backups: Vaultpress (paid) | WordPress Backup to Dropbox * Social Integration: AddThis Smart Layers * Marketing: AddThis Welcome Bar * SEO: All In One SEO Pack * Disable automatic ''' insertion: LCT Temporary wpautop Disable Shortcode ** Shortcode to use in source text: raw * '''Tags and categories for pages: Post Tags and Categories for Pages * Responsive Menu: Responsive Menu by Peter Featherstone * Pull quotes: Simple Pull Quote * Table of Contents: Table of Content SEO * SEO: the Moz SEO guide is highly popular and useful for laypeople * Wordpress plugins to optimize images for SEO ** Make sure file names are descriptive and relevant Social Media Sharing * AddToAny * ShareThis * ShareBar * AddThis Optimizing/Testing Your Site * GeoPeeker: view your site from various grographic locations! * WordPress guide to optimize speed (includes Smush.It plugin) * Must: W3 Total Cache WP plugin for speed * Leverage Browser Caching: how to * Test your speed here and with GTMetrix (latter: includes service for compressing images)! Basic Design Principles * Decide which grid layout you want ** Before doing anything else ** Draw it on paper, for instance ** Tranfici recommends these services: *** Grid System 960 *** Gridr Buildrrr *** Design by Grid * Make it look simple and familiar ** e.g. blog should look like a blog * Advice from Psychotactics: ** Totally and easily updateable ** Minimal, fast loading graphics * Usable and mobile * Calls to Action * Always Changing * Visuals: visitor sees my site before reading it * Design needs to follow marketing: identify ideal customer, name & tagline, brand promise * Write my own style guide for reference * Pick the right colours for your business (ideally 2, max 3) ** Refer to Bourn Creative's article series on colour meaning! 11 Reasons Why it doesn't Sell Article on Entrepreneur, by Firas Kittaneh, Oct 30, 2014 # Low-quality visuals # No reviews/testimonials # Badly chosen colors # Outdated information # Hard to find (SEO) # Not mobile-friendly # Contact info hard to find # Not focused on user # Requires sign-ups # Auto-playing audio/video # Painfully slow User's First Impression * Ambiance! ** How does the site look on different devices? *** Needs a responsive design ** How does typography influence word consumption? Easy to grasp? *** A welcoming layout ** How does layout influence eye movement? *** Uncluttered tracking eyes down the page * Too much info is overwhelming. Readers avoid * Reduce info, increase white space for accessibility (example: Couchsurfing (May 29, 2014)) ** White space: space between content and borders (breathing room) Elements * What’s my site’s grid? Divide content up with invisible grid lines * Columns: should be 450-550 pixels wide * Have a social log-in option "The Power of 3" * Article on Psychotactics * The brain finds it easy to grasp threes: elements, colours, fonts '''- building blocks of visual communication! ** Colours: look up colour symbolism to find the colours that fit your message * Keep the 3 elements compact so they don't break down into sub-elements * Keep fonts and styles consistent ** But add some contrast for drama: e.g. wide vs. vertical fonts * Article gives examples: McDonald's, Coke - only few elements! User Interface/Experience (UI, UX) Erik Kennedy: 7 rules for Creating Gorgeous UI (Part 1 | Part 2) # Add '''light from above to elements (shadow below them or their inset borders) #* e.g. buttons, sliders #* Inset '''elements: #** Text fields #** Pressed buttons #** Slider tracks #** Radio buttons (pressed) #** Check boxes #* '''Outset '''elements: #** Radio buttons (unpressed) #** Unpressed buttons #** Slider buttons #** Dropdown buttons #** Maps #** Popups # Design in '''Grayscale first! (example: Uber) #* This makes it clean and simple #* Add colours later: keep them relevant and don't overdo them #** e.g. grayscale + 1 or 2 colours #** or: grayscale + shades of the same color # Use White Space #* See examples in article # Be smart about overlaying pictures with text #* Avoid just writing on it unless you have good contrast #* Overlay the entire image (transparent black layer) #* Put the text in a box (add e.g. transparency, rounded corners) #* Blur the image #* Floor fade: gradient to black at bottom of image #* Diffuse the text's background # Emphasize text: pop up or down #* Pop up: styles that make text more visible, e.g. bold, capitals... #* Pop down: styles that make text less visible, e.g. small letters, low contrast... #* Other factors: color, size #* Balance these to highlight content or remove it from attention # Use nice fonts #* Examples in the article # Steal. Cherry-pick. #* Check out designers on Dribbble (examples in the article) #* Flat UI Pinboard (Pinterest) #* Pttrns Basic Layout * Article about full-page background images * Big CTA must stand out! ** e.g. build mailing list * Home: first impression (first 5 seconds are extremely important) ** Present content in F shape! (this is how readers look at page) ** Most important information needs to be above the fold (before scrolling down) ** Where do the eyes gravitate right away? ** What kind of information does one see? *** Does it highlight a problem clients may not know they have? ** Highlight the path and action I want readers to take *** Guide my visitors through the page *** Use leading questions (addressing doubts, problems) ** Hierarchy: Most important => Supporting (Details, CTA) => Least important ** Beyond home page: secondary pages with product details, case studies... * About: talk about reader first, wrap up with why I'm trustworthy, + photos, + testimonials * Contact: easy to find so visitors can get in touch ** Have a prominent Opt-In * Blog: good formatting, lots of images (at least 1 pinnable!), call to action * Resources: archive of useful links and contents for me & audience ** Easily accessible (menu link) ** Well-structured and sorted ** Include books (Amazon links) ** Track pageviews and clicks Advanced Structuring Guiding Visitors * In general: all paths must lead to my buy/contact page * Use nonverbal cues ** Visible hands establish trust ** Use hands and eyes to direct ** Understand facial expressions Typical path of visitors' attention # Logo # Main navigation menu # Search box # Social networking links # Primary image (whatever image was at the top of the repeating header or page) # Written content # Website footer Landing Page A page where you send users when you want them to take a specific action. Example page. * Have a strong headline * Make it clean '''and '''uncluttered ** Don't use the same design as the rest of your page ** Lots of white space, single column ** Only use relevant and meaningful visuals * Aesthetics: '''give your landing page a good, coherent '''look and feel ** Tastefully tailor fonts, colors, visuals to your audience ** Stay in line with your other materials (e.g. the original ad) * Ask for only one action ** Choice confuses * Nail the content above the fold! People may not scroll down. ** Upper 300 pixels of the page * Move the user along the page towards a desired goal ** Subscribe ** Book a consultation ** Join the community ** Purchase ** ... * Headline: refer to the place or ad copy the user came from! * Have a clear CTA * Second person: you, your * Deliver a clear, persuasive message ** Make it crystal clear. No digressions ** Make the copy tight (not necessarily short) * Most important points: beginning of paragraphs, bullets ** People read beginnings and ends first * First paragraph: short, no more than 1-2 lines! ** Never more than 4-5 lines in follow-up * Plan your layout: how much will be visible above the fold? * Ask for little: the easier it is to sign up, the better * Test everything. Essential Elements To sum up: # Headline: catch attention instantly # Benefits: tease, e.g. with fascinating bullet points # Call to action: expressly tell ppl what to do (e.g. sign up) # Opt-in form: the way to sign up # Social proof: (recommended) #* Number of subscribers #* Testimonials #* Reviews #* Media mentions #* ... Reference, Metrics * Ebook by Copyblogger: "Landing Pages: How to Turn Traffic into Money" ** Includes a chapter about metrics and tracking of conversion rates ** Alos includes excellent advice on analytics SEO (Search Engine Optimization) * Resource: the Moz SEO guide is highly popular and useful for laypeople * Social Media rankings (likes, retweets etc.) influence search results * Pack my articles with keywords '''to generate traffic ** Search engines need to understand the text (clearly readable, not metaphors or such) * Apart from that: create '''quality content that people will enjoy and share! * Consequently: please both search spiders and people OpenGraph for Social Media * Introduction and Beginner's Guide Copyblogger's Approach: "OC/DC" * Article and infographic: SEO extends to content marketing * Actual point of "SEO" is "o'''ptimizing '''c'ontent for 'd'iscovery and 'c'onversion''" * We optimize sites for traffic not just from Google, but all kinds of sources (social media, blogs...) * 2 areas of focus: '''external '''and '''on-site optimization ** External: improving traffic generated to site (social media, blogs, search engines, aggregators: Slideshare, syndication: Business Insider) ** On-Site: engage and keep visitors. Load times, useful content, responsiveness, ease of conversion How to do this: # Improve Content Symmetry: re-edit existing content #* Re-write headlines (e-book for this!) #* Review links: from most-read old articles to best new articles. Generally: lots of internal links to keep users around #* Improve calls to action #* New content from old successful numbered list posts: break down into invididual posts #* Revamp keywords # Mobile responsiveness: requirement # Optimize load times: e.g. WebPageTest as testing tool # Author attribution methods: look into this # Repurpose existing content: using so-called "rel=canonical" tag - look into this # Create my own research report: e.g. SurveyMonkey, Google (look into this) Google Analytics * 9 ways to leverage Google Analytics (Kristi Hines on Social Media Examiner, Jan 8, 2015) Colors * Understand color psychology (intro and reference here) * Pam Wilson on toning down colours and choosing the right ones * Never use black: it overpowers other colors. Saturate it! * Pick 2 colours that make sense to my market / support my message ** Psychotactics recommends 3 * Check what the market already uses Fonts * Fonts / typeface: serif, sans? Both? ** Serif: classic, timeless, established. Long paragraphs ** Sans Serif: cutting-edge, modern ** Both: compare letters a, g, e ** Custom typefaces are possible ** Use 2-3 fonts, tops * Copyblogger about fonts and text: ** Should be black on white background ** Use large font size ** Typeface: prioritize readibility ** One font for headers, one for text ** Links should be underlined ** Short paragraphs ** Columns: 450-550 pixels, not more __FORCETOC__